<template>
  <view>
    <movable-area :style="{ height: `${areaHeight}px` }">
      <movable-view v-for="(item, index) in state.list" :key="item.sign" class="drag-item"
        :class="[{ 'drag-item_activate': state.currentIndex == index }]" :y="item.y" direction="vertical"
        @longpress="onTouchStart(index)" @change="e => onChange(e, index)" @touchend="onTouchEnd"
        :disabled="state.disabled">
        <u-swipe-action class="w-686" :show="item.show" :index="index" bg-color="transparent" :key="item.sign"
          btn-width="120" :options="options" @click="onClick">
          <view class="list-item">
            <view class="flex-1">
              <u-input v-model="item.name" placeholder="请输入部门名称" @blur="onBlur($event, index)" />
            </view>
            <view class="text-60 c-#ccc">≡</view>
          </view>
        </u-swipe-action>
      </movable-view>
    </movable-area>
  </view>
</template>

<script setup>
const emit = defineEmits(['delete'])
const props = defineProps({
  list: Array
})

const state = reactive({
  list: [],
  cloneList: [],
  currentIndex: -1,
  oldIndex: -1,
  newIndex: -1,
  disabled: true,
})

const options = [{
  text: '删除',
  style: {
    width: '120rpx',
    height: '68rpx',
    backgroundColor: '#FF513A',
    borderRadius: '12rpx',
    marginRight: '20rpx'
  }
}]

const itemHeight = uni.upx2px(90)

const areaHeight = computed(() => {
  console.log('areaHeight', itemHeight * state.list.length);
  return itemHeight * state.list.length
})

const emitList = computed(() => state.list.map(item => {
  return { name: item.name, id: item.id }
}))

watch(() => props.list, (val) => {
  state.list = updateList(val)
  state.cloneList = JSON.parse(JSON.stringify(state.list))
})

function updateList (list) {
  return list.map((item, index) => {
    return {
      ...item,
      sign: Math.random() + index,
      y: index * itemHeight,
      show: false
    }
  })
}

function onTouchStart (index) {
  state.disabled = false
  state.currentIndex = index
  state.oldIndex = index
}

function onTouchEnd () {
  if (state.newIndex > -1 && state.currentIndex > -1 && state.newIndex !== state.currentIndex) {
    state.cloneList.splice(state.newIndex, 0, ...state.cloneList.splice(state.currentIndex, 1));
    state.list = updateList(state.cloneList);
    state.cloneList = JSON.parse(JSON.stringify(state.list));
    emit('change', emitList.value)
  }
  // 没换位恢复原位置
  if (state.newIndex > -1 && state.currentIndex > -1 && state.newIndex === state.currentIndex) {
    state.list = updateList(state.cloneList);
    state.cloneList = JSON.parse(JSON.stringify(state.list));
  }
  state.currentIndex = -1;
  state.oldIndex = -1;
  state.newIndex = -1;
  state.disabled = true
}

function onChange (e, index) {
  if (index != state.currentIndex) return;
  //位移的距离px
  const difference = e.detail.y - state.currentIndex * itemHeight;
  //计算位移几个位置
  const tempIndex = difference > 0 ? parseInt((difference + (itemHeight / 2)) / itemHeight) : parseInt((difference - (itemHeight / 2)) / itemHeight);
  //当前拖到的位置
  state.newIndex = Math.abs(state.currentIndex + tempIndex);
  if (state.newIndex > -1 && state.oldIndex > -1 && state.newIndex !== state.oldIndex) {
    changeList()
  }
  // 没换位恢复原位置
  if (state.newIndex === state.oldIndex && state.newIndex === state.currentIndex && state.oldIndex === state.currentIndex) {
    initList()
  }
}

function changeList () {
  const arr = JSON.parse(JSON.stringify(state.cloneList));
  arr.splice(state.newIndex, 0, ...arr.splice(state.currentIndex, 1));
  state.list.forEach((item, index) => {
    if (index !== state.currentIndex) {
      item.y = arr.findIndex(citem => citem.sign == item.sign) * itemHeight;
    }
  });
  state.oldIndex = state.newIndex;
}

function initList () {
  state.list.forEach((item, index) => {
    item.y = index * itemHeight;
  });
}

function onBlur (e, index) {
  state.list[index].name = e
  emit('change', emitList.value)
}

function onClick (index) {
  state.list.splice(index, 1)
  emit('change', emitList.value)
}
</script>

<style lang="scss" scoped>
movable-area {
  width: 100%;
  overflow: hidden;
}

.drag-item {
  width: 100%;
  height: 90rpx;
  overflow: hidden;

  &_active {
    z-index: 999;
    border: 2rpx solid #999;
  }
}

.list-item {
  width: 686rpx;
  height: 70rpx;
  padding: 0 32rpx;
  margin: 0 32rpx 6rpx 32rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: -2rpx 4rpx 12rpx 2rpx rgba(206, 143, 12, 0.1);
}
</style>